<template>
    <div>
        <div class="title-wrapper">
            <el-page-header @back="goBack"
                            :content="title">
            </el-page-header>
        </div>
        <el-form ref="elForm"
                 :model="formData"
                 :rules="rules"
                 size="medium"
                 label-width="260px">
            <el-form-item label="视频类型"
                          prop="videoType">
                <el-select v-model="formData.videoType"
                           placeholder="请选择类型"
                           filterable
                           clearable
                           :style="{width: '100%'}">
                    <el-option v-for="(item, index) in videoTypeOptions"
                               :key="index"
                               :label="item.dictLabel"
                               :value="item.dictValue"
                               :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题"
                          prop="title">
                <el-input v-model="formData.title"
                          placeholder="请输入标题"
                          clearable
                          :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="缩略图上传"
                          prop="uploadFaceImg">
                <el-upload ref="uploadFaceImg"
                           class="avatar-uploader"
                           :action="uploadFaceImgAction"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess"
                           :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl"
                         :src="imageUrl"
                         class="avatar">
                    <i v-else
                       class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="名称"
                          :prop="formData.videoType==='1'?'videoName':''">
                <el-input v-model="formData.videoName"
                          placeholder="请输入名称"
                          clearable
                          :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="关键字"
                          prop="keyWord">
                <el-input v-model="formData.keyWord"
                          placeholder="请输入关键字"
                          clearable
                          :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="简介"
                          :prop="formData.videoType==='1'?'synopsis':''">
                <el-input v-model="formData.synopsis"
                          type="textarea"
                          placeholder="请输入简介"
                          :autosize="{minRows: 4, maxRows: 4}"
                          :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="科室"
                          prop="belongToSpecialty">
                <el-select v-model="formData.belongToSpecialty"
                           placeholder="请选择科室"
                           filterable
                           clearable
                           :style="{width: '100%'}">
                    <el-option v-for="(item, index) in depStateOptions"
                               :key="index"
                               :label="item.dictLabel"
                               :value="item.dictValue"
                               :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="医生专家"
                          :prop="formData.videoType==='1'?'doctorSpecialist':''">
                <el-input v-model="formData.doctorSpecialist"
                          placeholder="请输入医生专家"
                          clearable
                          :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="区域"
                          :prop="formData.videoType==='1'?'area':''">
                <el-input v-model="formData.area"
                          placeholder="请输入区域"
                          clearable
                          :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="医院"
                          :prop="formData.videoType==='1'?'hospital':''">
                <el-input v-model="formData.hospital"
                          placeholder="请输入医院"
                          clearable
                          :style="{width: '100%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="发布时间"
                          prop="pubdate">
                <el-date-picker type="datetime"
                                v-model="formData.pubdate"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :style="{width: '100%'}"
                                default-time="12:00:00"
                                placeholder="请选择发布时间"
                                clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="作者"
                          :prop="formData.videoType === '1' ? 'author' : ''">
                <el-input v-model="formData.author"
                          placeholder="请输入作者"
                          clearable
                          :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="上传视频">
                <uploadVideo @setVideoId='setVideoId' />
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary"
                           @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { uploadFileUrl, baseUrl, ueditorUploadFileUrl } from '@/api/config'
import { getVideo, addVideo, updateVideo } from '@/api/operater/video'
import uploadVideo from '@/components/uploadVideo/uploadVideo'
export default {
    components: { uploadVideo },
    props: [],
    data() {
        return {
            title: '新增视频内容',
            formData: {
                videoType: null,
                title: undefined,
                videoName: undefined,
                keyWord: undefined,
                synopsis: undefined,
                belongToSpecialty: undefined,
                doctorSpecialist: undefined,
                area: undefined,
                hospital: undefined,
                pubdate: null,
                author: undefined,
            },
            imageUrl: '',
            isUpdate: false,
            uploadFaceImgAction: uploadFileUrl,
            rules: {
                videoType: [
                    {
                        required: true,
                        message: '请选择视频类型',
                        trigger: 'blur',
                    },
                ],
                title: [
                    {
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur',
                    },
                ],
                videoName: [
                    {
                        required: true,
                        message: '请输入名称',
                        trigger: 'blur',
                    },
                ],
                keyWord: [
                    {
                        required: true,
                        message: '请输入关键字',
                        trigger: 'blur',
                    },
                ],
                synopsis: [
                    {
                        required: true,
                        message: '请输入简介',
                        trigger: 'blur',
                    },
                ],
                belongToSpecialty: [
                    {
                        required: true,
                        message: '请选择科室',
                        trigger: 'change',
                    },
                ],
                doctorSpecialist: [
                    {
                        required: true,
                        message: '请输入医生专家',
                        trigger: 'blur',
                    },
                ],
                area: [
                    {
                        required: true,
                        message: '请输入区域',
                        trigger: 'blur',
                    },
                ],
                hospital: [
                    {
                        required: true,
                        message: '请输入医院',
                        trigger: 'blur',
                    },
                ],
                pubdate: [
                    {
                        required: true,
                        message: '请选择发布时间',
                        trigger: 'change',
                    },
                ],
                author: [
                    {
                        required: true,
                        message: '请输入作者',
                        trigger: 'blur',
                    },
                ],
            },
            depStateOptions: null,
            videoTypeOptions: null,
        }
    },
    computed: {},
    watch: {
        formData: {
            handler(newValue, oldValue) {
                console.log(Boolean(newValue.pubdate))
                this.formData.videoState = newValue.pubdate ? 0 : 1
            },
            deep: true,
        },
    },
    created() {
        var id = this.$route.query.videoId
        if (id) {
            this.isUpdate = true
            this.title = '编辑视频内容'
            this._getVideo(id)
        }
        this.getDicts('belong_department').then((response) => {
            this.depStateOptions = response.data
        })
        this.getDicts('video_type').then((response) => {
            this.videoTypeOptions = response.data
        })
    },
    mounted() {},
    methods: {
        setVideoId(id) {
            this.formData.videoFileIds = id
        },
        _getVideo(id) {
            getVideo(id)
                .then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        this.imageUrl = baseUrl(res.data.thumbnailId)
                        this.formData = { ...res.data }
                    }
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        handleAvatarSuccess(res, file) {
            // this.imageUrl = URL.createObjectURL(file.raw);
            // console.log(res);s
            if (res.code === 200) {
                this.imageUrl = res.data.fileUrl
                this.formData.thumbnailId = res.data.id
            } else {
                this.$message.error(res.msg)
            }
        },
        goBack() {
            this.$router.go(-1)
        },
        beforeAvatarUpload(file) {
            console.log(file)
            const isJPG =
                file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isLt2M
        },
        /** 提交按钮 */
        submitForm() {
            if (!this.isUpdate) {
                this.$refs['elForm'].validate((valid) => {
                    if (!valid) {
                        console.log(valid)
                        return
                    }
                    // TODO 提交表单
                    addVideo(this.formData).then((response) => {
                        if (response.code === 200) {
                            this.$message.success(response.msg)
                            this.resetForm()
                            this.imageUrl = ''
                            this.$router.go(-1)
                        }
                    })
                })
            } else {
                this.$refs['elForm'].validate((valid) => {
                    if (!valid) return
                    // TODO 提交表单
                    updateVideo(this.formData).then((response) => {
                        if (response.code === 200) {
                            this.$message.success(response.msg)
                            this.resetForm()
                            this.imageUrl = ''
                            this.$router.go(-1)
                        }
                    })
                })
            }
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
    },
}
</script>
<style lang='scss'>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 300px;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 100%;
    height: 178px;
    display: block;
}
.title-wrapper {
    padding: 24px;
}
.el-upload__tip {
    line-height: 1.2;
}
.el-form {
    width: 80%;
    margin: 0 auto;
}
</style>
